<template>
  <div class="app-container customer-div">
    <div>
      <!--搜索-->
      <el-form
        :inline="true"
        :model="listQuery"
        size="mini"
        label-width="100px"
      >
        <el-form-item label="日期：">
          <el-date-picker
            v-model="listQuery.date"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="客户名称：">
          <el-autocomplete
            clearable
            class="inline-input"
            value-key="customerName"
            :fetch-suggestions="querySearch"
            v-model="listQuery.custom"
            placeholder="请输入内容"
            @select="handleSelectCustomerName"
            :trigger-on-focus="false"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="部门:">
          <el-cascader
            v-model="listQuery.departmentId"
            size="mini"
            :options="deptOptions"
            :props="deptProps"
            >
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearchList()" type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 图表 -->
    <div
      class="box1"
      id="echart1"
      style="height: 400px; margin-top: 20px"
      v-loading="loadingChart"
    ></div>
    <!--数据列表-->
    <div class="table-container">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
        height="300"
      >
        <el-table-column label="客户" align="center" min-width="120" prop="custom">
        </el-table-column>
        <el-table-column label="负责人" align="center" min-width="120" prop="tracker">
        </el-table-column>
        <!-- <el-table-column label="跟进分类" align="center" width="150" prop="className">
        </el-table-column> -->
        <el-table-column label="跟进频率" align="center" min-width="120" prop="trackingRate">
        </el-table-column>
        <el-table-column label="拜访频率" align="center" min-width="120" prop="visitRate">
        </el-table-column>
        <el-table-column label="预计跟进总数" align="center" min-width="120" prop="expectTrackingSum">
        </el-table-column>
        <el-table-column label="预计拜访频率" align="center" min-width="120" prop="expectVisitSum">
        </el-table-column>
        <el-table-column label="日常" align="center" min-width="120" prop="daily">
        </el-table-column>
        <el-table-column label="拜访" align="center" min-width="120" prop="visit">
        </el-table-column>
        <el-table-column label="成交" align="center" min-width="120" prop="deal">
        </el-table-column>
        <el-table-column
          label="实际跟进总数(负责人)"
          align="center"
          width="200"
          prop="realTrackingTotal"
        >
        </el-table-column>
        <el-table-column label="日常完成率" align="center" width="100" prop="dailyEndRate">
        </el-table-column>
        <el-table-column label="拜访完成率" align="center" width="100" prop="visitEndRate">
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10, 15, 20]"
        :total="count"
      >
      </el-pagination>
    </div> -->
  </div>
</template>
<script>
import { getCustomerFollowListAPI } from "@/api/fms.js";
import { getCustomerOption } from '@/api/partner.js'
import { getDeptList } from '@/api/management.js'
import echarts from "echarts";
import "@/utils/jQuery.print";
import { formatDate } from "@/utils/date";
import { mapGetters } from "vuex";
const defaultListQuery = {
  date:[],
  custom: "",
  departmentId:[48,49]
};
export default {
  name: "customerFollowReport",
  data() {
    return {
      // 部门
      deptProps: {
        multiple: true,
        emitPath:false,
        value: "departmentId",
        label: "departmentName",
      },
      deptOptions: [],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      xList: [],
      expectTrackingSum: [],
      realTrackingTotal:[],
      listLoading: false,
      loadingChart: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "30天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["name", "mobile", "userId"]),
  },
  created() {
    let now = new Date();
    let today = formatDate(now, "yyyy-MM-dd");
    this.listQuery.date = [today, today];
    this.getList()
    this.getDeptLists()
  },
  mounted() {
  },
  filters: {},
  components: {},
  methods: {
    //去除不要的children
    forTree(list) {
      let newList = list;
      if (newList.length) {
        for (let i = 0; i < newList.length; i++) {
          if (newList[i].children && newList[i].children.length > 0) {
            this.forTree(newList[i].children)
          } else {
            delete newList[i].children;
          }
        }
        return newList
      }
    },
    // 获取部门列表
    async getDeptLists() {
      const res = await getDeptList({
        isView:1
      })
      this.deptOptions = this.forTree(res);
    },
    //客户名称输入匹配
    querySearch(queryString, cb) {
      getCustomerOption({ keywords: queryString }).then((res) => {
        cb(res);
      });
    },
    //选择客户名称
    handleSelectCustomerName(item) {
      this.listQuery.custom = item.customerName;
    },
    initEcharts1() {
      var myChart = echarts.init(document.getElementById("echart1"));
      var option = {
        title: {
          text: "客户跟进报表",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "日期",
          axisLabel: {
            interval: 0,
            rotate: 45
          },
          data: this.xList,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        series: [
          {
            name: "预计跟进总数",
            type: "bar",
            data: this.expectTrackingSum,
            barMaxWidth: 30,
            itemStyle: {
              color: "#91cc75",
            },
          },
          {
            name: "实际跟进总数",
            type: "bar",
            data: this.realTrackingTotal,
            barMaxWidth: 30,
            itemStyle: {
              color: "#fac858",

            },
          },
        ],
      };
      myChart.setOption(option);
    },
    //获取列表
    async getList() {
      this.listLoading = true;
      this.loadingChart = true;
      this.tableData = []
      this.xList = []
      this.expectTrackingSum = []
      this.realTrackingTotal = []
      const res = await getCustomerFollowListAPI(this.listQuery)
      if (res.list.length) {
        this.tableData = res.list;
        this.xList = res.total.dateByX
        res.total.trackingDataByY.forEach((item) => {
          this.expectTrackingSum.push(item.data1),
          this.realTrackingTotal.push(item.data2)
        })
        this.listLoading = false;
        this.loadingChart = false;
        this.initEcharts1();
      } else {
        this.listLoading = false;
        this.loadingChart = false
        this.initEcharts1();
      }
    },
    // 分页
    // handleSizeChange(val) {
    //   this.listQuery.pageNum = 1;
    //   this.listQuery.pageSize = val;
    //   this.getList();
    // },
    // handleCurrentChange(val) {
    //   this.listQuery.pageNum = val;
    //   this.getList();
    // },
    // 搜索
    handleSearchList() {
      // this.listQuery.pageNum = 1;
      this.getList();
    },
  },
};
</script>



